<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/prewimg.css">
		<style type="text/css">
			
			.mui-popover{
				display: none;
				position: fixed;
				width: 80%;
				height: auto;
				border-radius: 0;
	    		left: 50%;
	    		top: 50%;
	    		margin: 0 auto;
	    		z-index: 9999;
	    		background-color: #fff;
			    -webkit-transform: translateX(-50%) translateY(-50%);
			    -moz-transform: translateX(-50%) translateY(-50%);
			    -ms-transform: translateX(-50%) translateY(-50%);
			    transform: translateX(-50%) translateY(-50%);
			}
			.mui-popover-arrow{
				display: none;
			}
			.mui-bar {
				display: flex;
				align-items: center;
				box-shadow: none;
			}
			
			.mui-title {
				font-size: 120%;
				color: #288EFE;
			}
			
			#fabiao {
				background-color: #F7F7F7;
				position: absolute;
				right: 0;
				bottom: 2px;
				font-size: 100%;
				border: 0;
				color: #288EFE;
			}
			
			.mui-pull-left {
				background-color: #F7F7F7;
				margin-left: -3%;
				font-size: 100%;
				border: 0;
				position: absolute;
				bottom: 2px;
				color: #2F91FE;
			}
			
			.mui-content {
				background-color: white;
				overflow: hidden;
				padding-bottom: 8%;
			}
			
			.write-text {
				font-size: 90%;
				overflow-y: hidden;
				border: #323232;
			}
			
			.chuan-div {
				width: 100%;
				padding-bottom: 5%;
			}
			
			.shangchuan-div {
				width: 29.6%;
				display: flex;
				flex-wrap: wrap;
				background-color: #EFEFF4;
				justify-content: center;
				font-size: 80%;
				color: #BFBFBF;
				margin-left: 4.5%;
				padding: 5%;
				margin-top: 1%;
			}
			
			.shangxhuan-png {
				width: 100%;
				height: 10%;
			}
			
			.imgs {
				width: 140%
			}
			
			.img-div {
				width: 30%;
				padding: 1%;
				padding-bottom: 0;
				overflow: hidden;
				border-radius: 5px;
			}
			
			.chuanimgsarea {
				width: 100%;
				margin-left: 3.5%;
				display: flex;
				flex-wrap: wrap;
				padding: 0;
			}
			
			.area-div1 {
				width: 94%;
				margin-left: 3%;
				border-top: 1px solid #EFEFF4;
				font-size: 100%;
				padding: 3% 0;
			}
			
			#area-div1 {
				float: right;
				display: flex;
				align-items: center;
				width: 50%;
				justify-content: flex-end;
			}
			
			.mui-switch {
				margin-left: 5%;
			}
			
			.area-div2 {
				width: 94%;
				margin-left: 3%;
				display: flex;
				margin-top: 40px;
			}
			
			.area-png {
				width: 8%;
				height: 8%;
				position: absolute;
				right: 4%;
			}
			
			.area-div2-div {
				margin-top: 1%;
				float: left;
			}
			
			#getarea {
				width: 88%;
				margin-bottom: 0;
				overflow: hidden;
				resize: none;
				border: 0;
				font-size: 90%;
				padding-left: 0!important;
				padding-top: 0!important;
			}
			
			.paddingflex {
				width: 100%;
				display: flex;
				align-items: center;
				font-size: 90%;
				padding-left: 3%;
				padding-top: 10px;
				border-top: 1px solid #F7F7F7;
			}
			
			.paddingflex img {
				position: absolute;
				right: 5%;
				margin-top: 0;
				margin-bottom: 0;
				width: 4.5%;
				margin-top: 2px;
			}
			
			.type-sapn {
				position: absolute;
				right: 10%;
				margin-top: 0;
				color: #ADADAD;
				font-size: 95%;
			}
		</style>
	</head>

	<body>

		<!--弹出菜单-->
		<div id="pop" class="mui-popover">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#" data-index="0">对全部开放</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#" data-index="1">对认证过的开放</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#" data-index="2">对本校认证过的开放</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#" data-index="3">对认证过(含学生证)的开放</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#" data-index="4">对本校认证过的(含学生证)开放</a>
				</li>
			</ul>
		</div>
		
		<header class="mui-bar mui-bar-nav" id="header">
			<button class="mui-action-back mui-pull-left" id="quxiao">取消</button>
			<h1 class="mui-title">写动态</h1>
			<button type="button" id="fabiao">发表</button>
		</header>

		<div class="mui-content">
			<textarea name="" class="write-text" id="txtContent" rows="5" cols="30" placeholder="留下此刻的想法吧...." onkeyup="ResizeTextarea()"></textarea>

			<div id="chuanimgs" class="chuan-div">

				<div id="chuanimgsarea" class="chuanimgsarea">
					<!--存放图片区域-->
				</div>

				<div class="shangchuan-div" id="ctu">
					<img src="../images/addpto.png" class="shangxhuan-png" />
				</div>
			</div>

			<!--获取位置-->
			<div class="area-div1">
				<div class="area-div2-div">位置</div>
				<div id="area-div1">是否显示
					<div class="mui-switch mui-switch-blue mui-switch-mini mui-active" id="myswitch">
						<div class="mui-switch-handle"></div>
					</div>
				</div>
			</div>
			<div class="area-div2">
				<textarea id="getarea" maxlength="26" onkeyup="myfunction(this)" rows="2" value="" placeholder="点击右侧图标获取位置"></textarea>
				<img src="../images/area.png" class="area-png" id="area-png" />
			</div>
			<div style="float: right;color: #ABABAB;font-size: 60%;margin-right: 10%;">
				还能输入<span id="text-length"></span>个字
			</div>

			<div class="paddingflex" id="openPopover">谁能看见<span id="type-sapn" class="type-sapn"></span><img src="../images/toserach.png"></div>
		</div>

		<script src="../js/mui.min.js"></script>
		<script src="../js/arttmpl.js"></script>
		<script src="../js/mui.previewimage.js"></script>
		<script src="../js/mui.zoom.js"></script>
		<script src="../js/immersed.js"></script>
		<script src="../js/popover.js"></script>
		<script type="text/javascript">
			mui.previewImage(function(img) {
				plus.webview.currentWebview().setStyle({
					top: '0px',
					bottom: '0px'
				})
			}, function(img) {
				plus.webview.currentWebview().setStyle({
					top: '0px',
					bottom: '0px'
				})
			});
			mui.init({
				gestureConfig: {
					longtap: true, //默认为false
					hold: true, //默认为false，不监听
					release: true //默认为false，不监听
				}
			});
				
			function myfunction(obj) {
				var textlength = 26 - obj.value.length;
				document.getElementById('text-length').textContent = textlength;
			}

			//textarea自适应说说高度
			function ResizeTextarea() {
				// 最小高度  
				var minRows = 5;
				// 最大高度，超过则出现滚动条  
				var maxRows = 100;
				var t = document.getElementById('txtContent');
				if(t.scrollTop == 0) t.scrollTop = 1;
				while(t.scrollTop == 0) {
					if(t.rows > minRows)
						t.rows--;
					else
						break;
					t.scrollTop = 1;
					if(t.rows < maxRows)
						t.style.overflowY = "hidden";
					if(t.scrollTop > 0) {
						t.rows++;
						break;
					}
				}
				while(t.scrollTop > 0) {
					if(t.rows < maxRows) {
						t.rows++;
						if(t.scrollTop == 0) t.scrollTop = 1;
					} else {
						t.style.overflowY = "auto";
						break;
					}
				}
			}
			var fileArr = [];
			var strr = 9;
			document.getElementById('ctu').addEventListener('tap', function() {
				if(strr != 0) {
					galleryImg();
				}
			})

			function galleryImg() {
				// 从相册中选择图片  
				plus.gallery.pick(function(e) {
					for(var i in e.files) {
						var fileSrc = e.files;
					}
					setFile(fileSrc);
					setHtml(fileSrc);
					console.log(fileSrc.length)
				}, function(e) {
					console.log("取消选择图片");
				}, {
					filter: "image",
					multiple: true,
					maximum: strr,
					system: false,
					onmaxed: function() {
						plus.nativeUI.alert('最多只能选择9张图片');
					}
				});
			}

			function setFile(fileSrc) {
				var image = new Image();
				image.src = fileSrc;
				fileArr.push(image);
			}

			function setHtml(path) {
				strr = strr - path.length;
				var str = template('update-img', {
					"record": path
				});
				document.getElementById('chuanimgsarea').innerHTML += str;
				var viewwidth = document.body.clientWidth;
				for(var i = 0; i < document.getElementsByClassName('img-div').length; i++) {
					var imgs = document.getElementsByClassName('img-div')[i].getElementsByTagName('img')[0];
					alert(imgs.style.Width + ',' + imgs.style.Height);
					document.getElementsByClassName('img-div')[i].style.cssText = "width: 30.5%;height: -webkit-calc(" + viewwidth * 0.31 + "px);"
				}
			}

			//长安删除图片	    	
			mui(".chuanimgsarea").on('longtap', '.img-div', function() {
				var alllength = document.getElementsByClassName('img-div');
				var index = this.id;
				plus.nativeUI.actionSheet({
					title: "请选择您的操作",
					cancel: "取消",
					buttons: [{
						title: "删除"
					}]
				}, function(e) {
					if(e.index == 1) {
						strr++;
						for(var i = 0; i < alllength.length; i++) {
							if(index == i) {
								alllength = alllength[i];
								alllength.parentNode.removeChild(alllength);
							}
						}

						for(var j = 0; j < document.getElementsByClassName('img-div').length; j++) {
							document.getElementsByClassName('img-div')[j].id = j;
						}
					}
				});
			});

			mui.plusReady(function() {

				starbar();
				plus.navigator.setStatusBarStyle("dark");
				
				var viewwidth = document.body.clientWidth;
				document.getElementById('area-png').style.height = "-webkit-calc(" + viewwidth * 0.08 + "px)"
				
				var pop = new popover('#pop');
				var fbtype = document.getElementById('type-sapn');
				document.querySelector('#openPopover').addEventListener('tap', function() {
					pop.open();
				})
				mui('.mui-table-view').on('tap', 'li a', function() {
					fbtype.textContent = this.innerHTML;
					pop.close();
				})

				//获取位置
				document.getElementById('area-png').addEventListener('tap', function() {
					//第一步通过mui.plusReady【表示页面加载事件】调用hbuilder提供的百度定位
					plus.geolocation.getCurrentPosition(geoInf, function(e) {

					}, {
						geocode: true,
						provider: 'amap'
					});

					//第二步通过geolnf 方法来获取具体的定位信息

					function geoInf(position) {

						var codns = position.coords; //获取地理坐标信息；

						var longt = codns.longitude; //获取到当前位置的经度

						var lat = codns.latitude; //获取到当前位置的纬度；

						//提醒：position.address 获取的是地址集合包括省市县街道等.如果获取不到就返回undefined

						//country国家，province省，city城市，district区（县）名称，street街道和门牌信息

						//poiNamePOI信息。如“电子//城．国际电子总部”
						document.getElementById("getarea").value = position.address.city + "" + position.address.poiName;
						var lengtext = 26 - document.getElementById("getarea").value.length;
						document.getElementById('text-length').textContent = lengtext;
					}
				})

				var Area = '';
				var count = 0;
				document.getElementById("myswitch").addEventListener("toggle", function(event) {
					count++;
					var areacol = document.getElementById('getarea');
					if(event.detail.isActive) {
						areacol.style.color = "";
						Area = areacol.value;
					} else {
						areacol.style.color = "#A9A9A9";
						Area = "";
					}
				})
				//发表动态
				document.getElementById('fabiao').addEventListener('tap', function() {
					var arr = [];
					if(count == 0) {
						Area = document.getElementById('getarea').value;
					}
					var tcon = document.getElementById('txtContent').value;
					var aaa = document.getElementsByClassName('img-div');
					for(var i = 0; i < aaa.length; i++) {
						arr[i] = aaa[i].getElementsByTagName('img')[0].src;
					}
					var files = arr;
					if(files.length == 1) {
						var uploadSrc = "https://www.lunyuwang.com/mineController/insertDongTai1";
					} else if(files.length == 2) {
						var uploadSrc = "https://www.lunyuwang.com/mineController/insertDongTai2";
					} else if(files.length == 3) {
						var uploadSrc = "https://www.lunyuwang.com/mineController/insertDongTai3";
					} else if(files.length == 4) {
						var uploadSrc = "https://www.lunyuwang.com/mineController/insertDongTai4";
					} else if(files.length == 5) {
						var uploadSrc = "https://www.lunyuwang.com/mineController/insertDongTai5";
					} else if(files.length == 6) {
						var uploadSrc = "https://www.lunyuwang.com/mineController/insertDongTai6";
					} else if(files.length == 7) {
						var uploadSrc = "https://www.lunyuwang.com/mineController/insertDongTai7";
					} else if(files.length == 8) {
						var uploadSrc = "https://www.lunyuwang.com/mineController/insertDongTai8";
					} else if(files.length == 9) {
						var uploadSrc = "https://www.lunyuwang.com/mineController/insertDongTai9";
					} else {
						var uploadSrc = "https://www.lunyuwang.com/mineController/insertDongTai";
					}
					if(tcon == "" && arr == "") {
						mui.toast("发表内容不能为空哦！")
					} else {
						var wt = plus.nativeUI.showWaiting();      
						var task = plus.uploader.createUpload(uploadSrc, {
								method: "POST"
							},         
							function(t, status) { //上传完成  
								if(status == 200) {          
									var peweb = plus.webview.currentWebview().opener(); //这种方式也可以 
									//触发列表界面的自定义事件（refresh）,从而进行数据刷新  
									mui.fire(peweb, 'reefresh', {});
									window.setTimeout(function() {
										mui.back();
										mui.toast('发表成功!');
									}, 2000)
									wt.close();         
								} else {            
									mui.alert("上传失败：" + status);            
									wt.close(); //关闭等待提示按钮                    
								}        
							});         
						//将文件集合添加到上传队列中		   
						for(var i = 0; i < files.length; i++) { 
							task.addFile(files[i], {
								key: "files" + i
							});
						}           
						if(Area) {
							console.log(Area);
							task.addData("lydongtai_Address", Area);
						}
						var lyuser_Card = plus.storage.getItem("card");
						if(lyuser_Card) {
							task.addData("lyuser_Card", lyuser_Card);
						}    

						if(tcon) {
							task.addData("lydongtai_Text", tcon);
						}  
						task.start();
					}
				})
								
				var old_back = mui.back;
				//重写返回事件
				mui.back = function(){
					var arr1 = [];
					var tcon1 = document.getElementById('txtContent').value;
					var aaa = document.getElementsByClassName('img-div');
					for(var i = 0; i < aaa.length; i++) {
						arr1[i] = aaa[i].getElementsByTagName('img')[0].src
					}
	                //判断是否打开图片预览，如果是，就先关掉图片，否则直接关闭当前页面
	                if(document.querySelector(".mui-preview-in")){
	                    mui.previewImage().close();
	                    return;
	                }else if(tcon1 == "" && arr1 == "") {
						old_back(plus.navigator.setStatusBarStyle("light"));
					} else {
						mui.confirm('确认放弃发表？', ['取消', '确认'], function(e) {
							if(e.index == 0) {
								old_back(plus.navigator.setStatusBarStyle("light"))
							}
						})
					}
	    			
	            }

			})
		</script>

		<!--图片区域渲染模板-->
		<script type="text/template" id="update-img">
			<% for(var i in record){ var item=record[i]; %>
			<div class="img-div" id="<%=i%>">
				<img src="<%=item%>" class="imgs" data-preview-src="" data-preview-group="0">
			</div>
			<% } %>
		</script>
	</body>

</html>